import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import wsWrapper from './websocket'

import ElementPlus, {ElMessage} from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app
  .use(ElementPlus)
  .use(router)
  .mount('#app')

app.config.globalProperties.wsWrapper = wsWrapper

app.directive('number-range', {
  mounted(el, binding) {
    if (!(binding.value instanceof Array)) {
      throw 'Value of directive "number-range" must be array type'
    }

    el.onblur = (ev) => {
      const range = binding.value
      const number = ev.target.value
      if (number === '') {
        return
      }
      const [start, end] = range
      if (number < start || number > end) {
        ElMessage.error({
          message: `Input number ${number} is out of range [${start} - ${end}]`,
          duration: 2000,
          showClose: true,
        })
      }
    }
  }
})
